<template>
	<!-- 标题区域 -->
	<van-nav-bar title="购物车" left-text="返回" right-text="主页" left-arrow @click-left="() => { $router.back() }"
		@click-right="() => { $router.push('/') }" />
	<div style="height: 45px;"></div>
	<!-- 空状态 -->
	<van-empty v-if="!usercart.length" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
		image-size="80" description="您的购物空空如也" />
	<div v-else v-for="item in usercart">
		<!-- 滑动删除 -->
		<van-swipe-cell style="height: 100%;">
			<!-- 商品卡片渲染 -->
			<van-card :price="item.goods.goods_price" :title="item.goods.goods_name">
				<!-- 插槽 -->
				<template #thumb>
					<div class="imgandche">
						<van-checkbox v-model="item.checked"></van-checkbox>
						<!-- 图片 -->
						<img style="width: 70px;height: 70px;" :src="item.goods.goods_big_logo ?
							item.goods.goods_big_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'">
					</div>
				</template>
				<!-- 数量插槽 -->
				<template #num>
					<van-stepper v-model="item.number" theme="round" button-size="22" disable-input />
				</template>
			</van-card>
			<!-- 滑动删除 -->
			<template #right>
				<van-button square text="删除" type="danger" class="delete-button" style="height: 100%;"
					@click="deletecart(item.id)" />
				<!-- 渲染数据的id -->
			</template>
		</van-swipe-cell>
		<!-- 提交订单栏 -->
		<van-submit-bar :price="allprice" button-text="提交订单" @submit="onSubmit">
			<van-checkbox v-model="checkedall">全选</van-checkbox>
		</van-submit-bar>
	</div>
</template>
<script setup>
import { showToast } from 'vant';
import router from '@/router';
import { computed, ref } from 'vue';
import { orderApi } from '@/api/api';
// 引入pinia
import { useCounterStore } from '@/stores/car.js'
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()
// 自定义渲染函数
let usercart = ref([])
const rander = () => {
	// 区分用户的购物车数据
	let username = localStorage.getItem('username')
	usercart.value = store.cars.filter(item => item.username == username)
}
rander()
// 滑动删除
const deletecart = (id) => {
	// 在数据过滤出id
	console.log(id);
	store.cars = store.cars.filter(item => item.id != id)
	// 删除之后重新渲染页面
	rander()
}
// 全选 
const checkedall = computed({
	// 获取
	get() {
		// 判断是购物车是否存在商品
		if (usercart.value.length == 0) {
			return false
		}
		// 购物车商品存在 则返回商品 
		else {
			return usercart.value.every(item => item.checked)
		}
	},
	// 设置 参数 value
	set(val) {
		// console.log(val);
		// 返回 商品的 真假值和val的真假值一致 则是全选 
		usercart.value.forEach(item => item.checked = val)
	}
})
// 计算总价 选中商品的价格
let allprice = computed(() => {
	let all = ref(0)
	// 利用去重 找出选中的数据 进行计算
	let checked = usercart.value.filter(item => item.checked)
	// 循环遍历每个选中的商品价格 进行计算累加 得出总价
	checked.forEach(item => {
		// 总价 = 商品的数量 * 商品的价格
		all.value = item.number * item.goods.goods_price
	})
	// 返回到定义的价格（priceall） 保留两位小数
	return all.value * 100
})
// 提交
const onSubmit = () => {
	// 获取选中的商品
	let checked = usercart.value.filter(item => item.checked)
	// 进行判断 是否有选中的商品
	if (checked.length == 0) {
		// 轻提示
		showToast({
			message: '请选择需要支付的商品',
			type: 'fail',
			// 时间
			duration: 2000,
		})
	} else {
		// 是选中的商品 进行提交 拿到提交接口
		console.log(checked);
		orderApi({
			goodsIds: checked.map(item => item.goods.goods_id).join(','),
			username: localStorage.getItem('username'),
			product_code: checked[0].goods.goods_name,
			totalPrice: allprice.value,
			nums: checked.map(item => item.number).join(','),
		}).then(res => {
			console.log('订单数据', res);
			router.push('/order/' + res.data.data.orderId)
		})
	}
}
</script>
<style lang="scss" scoped>
.imgandche {
	display: flex;
}
</style>